<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.yaodian100.core.common.utils.ServerValue"%>
<script src="/js/jtip.js"></script>
<script language="javascript">
	function viewCouponApplyRange(couponItemCode) {
		//按下連結時用 ajax 取得適用範圍說明內容，並放到隱藏 (display:none) 的 div 裡，後續控制讓範圍說明內容的頁面去處理
		doAR('<%=ServerValue.getFrontContextPath()%>/member/myCoupon/viewCouponApplyRange.do?AJAX=true&refreshZone=tab&couponItemCode='+couponItemCode,'applyRangeDescription');
	}
</script>
<c-rt:set var="now" value="<%=new java.util.Date()%>" />
<s:if test="%{couponListType == @com.yaodian100.mall.member.web.MyCouponAction@COUPON_LIST_TYPE_USABLE_COUPON}">
	<script language="javascript">
		$().ready(function(){
			
			$("#current_location").html('&nbsp;&gt;&nbsp;我的礼券&nbsp;-&nbsp;目前可用礼券');
			$("#acc_li").attr('class','mb-tab-f');
			$("#use_li").removeAttr('class');
			$("#wait_li").removeAttr('class');
			$("#get_li").removeAttr('class');
			if($("#cTable tr").size()>2){$("#cTable").tablesorter();}
			$("#m_mycoupon").css("font-weight","bold");
			$(":td[id*=overDue]").each(function(){
				$(this).html($(this).text()+'<br/><p>(已过期)</p>'); 
			});
		});
	</script>
</s:if>

<s:if test="%{couponListType == @com.yaodian100.mall.member.web.MyCouponAction@COUPON_LIST_TYPE_WAIT_COUPON}">
	<script language="javascript">
		$().ready(function(){
			
			$("#current_location").html('&nbsp;&gt;&nbsp;我的礼券&nbsp;-&nbsp;待生效礼券');
			$("#wait_li").attr('class','mb-tab-f');
			$("#use_li").removeAttr('class');
			$("#acc_li").removeAttr('class');
			$("#get_li").removeAttr('class');
			if($("#cTable tr").size()>2){$("#cTable").tablesorter();}
		});
	</script>
</s:if>

<s:if test="couponRegisterSuccess">
	<DIV id="registerSuccess" title="完成充值" class="dailog-ok-L2" style="display:none" >
	  <p>恭喜您，完成充值！</p> 
	  <div align="center"> <span style="text-align:center;"><a href="#" class="btn-mid" onClick="$(this).parents('div:eq(1)').dialog('close');" >关闭</a></span> </div> 
	</DIV> 
	<script language="javascript">
		$().ready(function(){
			$("#registerSuccess").hide();
			$("#registerSuccess").dialog({
				bgiframe: true,
				height: 155,
				width:300,
				modal: true,
				close: function(event, ui) {
					document.location.reload();//重新整理，才能更新頁籤區域外，「目前可用礼券」的數字
				}
			});
		});
	</script>
</s:if>

      <table id="cTable" class="tablesorter {sortlist: [[0,1]]} tb-2" width="100%" border="0">
      <thead>
        <tr>
          <th width="90"><span><a href="javascript:;">获得日期</a></span></th>
          <th width="105" class="{sorter: 'digit'}"><span><a href="javascript:;">礼券面额</a></span></th>
          <th><span><a href="javascript:;">礼券获得来源</a></span></th>
          <th width="100" class="{sorter: false}">礼券序号</th>
          <th width="110" class="{sorter: 'text'}"><span><a href="javascript:;">生效日</a></span></th>
          <th width="110" class="{sorter: 'text'}"><span><a href="javascript:;">到期日</a></span></th>
        </tr>
      </thead>
      <tbody>
		<s:if test="%{couponList.size() <= 0}">
			<tr>
				<td height="30" colspan="5">您没有任何记录。</td>
			</tr>
		</s:if>
		<s:iterator value="couponList" var="couponItem" status="listStatus">
			<tr>
			    <td>
			      	<s:date name="#couponItem.regDate" format="yyyy-MM-dd" />
			    </td>
				<td>
					<s:property value="%{#couponItem.coupon.faceValue.setScale(1)}" />
					元
				</td>
				<td>
					<p>
						<b>
							<s:if test="%{#couponItem.coupon.name != ''}">
								<s:property value="%{#couponItem.coupon.name}" />
								<span>
									（<a href="#" id="anchorViewCouponApplyRange" onclick="javascript:viewCouponApplyRange('${couponItem.code}');return false;" >适用范围</a>）
								</span>
								<br/>
							</s:if>
						</b>
						<s:property value="%{#couponItem.coupon.description}" />
					</p>
				</td>
				<td>
					<s:property value="#couponItem.code" />
				</td>
				<td>
					<fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${couponItem.startDate}" />
				</td>
				<td<c-rt:if test="${couponItem.endDate < now}"> id="overDue"</c-rt:if>>
					<s:if test="#couponItem.expireInDays(7)">
						<a href="javascript:;?width=90&amp;" name="您的礼券将於一周内到期！" id="warn${listStatus.index}" class="jTip">
				          	<span class="txt-rd">
								<fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${couponItem.endDate}" />
				          	</span>
						</a>
					</s:if>
					<s:else>
						<span>
							<fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${couponItem.endDate}" />
						</span>
					</s:else>
				</td>
			</tr>
		</s:iterator>
      </tbody>  
      </table>
      <!-- 注意事项 -->
      <div class="txt-note">
        <ul>
          <li>．礼券使用明细仅保留 6 个月内的资料。</li>
          <li> ‧使用方式：结帐时系统会显示可使用的礼券清单，请您直接选择要使用的礼券即可。</li>
          <li> ‧礼券一经使用，不予退还。</li>
        </ul>
      </div>
      <!-- 注意事项 -->
	<!--適用範圍視窗-->
	<div id="applyRangeDescription" style="display:none" >
	</div>
      